<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: DataSource.IO</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: DataSource.IO</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>Accessing data from a server is easy with DataSource.IO, which uses the IO Utility to retrieve data over HTTP. A <a href="../dataschema/">DataSchema</a> plugin is used to normalize incoming data into a known format for consistency of usage by other components.</p>
</div>

<div class="example yui3-skin-sam">
<style scoped>
/* custom styles for this example */
#demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;}
</style>

<form id="demo">
    <h4>JSON</h4>
    <h6>Data</h6>
    <pre>
{
    "ResultSet": {
        "type":"web",
        "totalResultsAvailable":391000000,
        "totalResultsReturned":10,
        "firstResultPosition":1,
        ...
        "Result":[
            {"Title":"Madonna","Summary":"Official site of pop diva
                Madonna, with news, music, media, and fan club.",
                "Url":"http:\/\/www.madonna.com\/", ...,
                "Size":"145030"}},
            {"Title":"Madonna - MySpace","Summary":"Madonna MySpace
                page features news, blog, music downloads, desktops,
                wallpapers, and more.",
                "Url":"http:\/\/www.myspace.com\/madonna",
                ..., "Size":"110365"}},
            {"Title":"YouTube - madonna's Channel",
                "Summary":"The Official Madonna YouTube Channel.
                Want to Subscribe? ... http:\/\/www.youtube.com\/Madonna.
                Sharing Options There are 3 ways to share this channel.",
                "Url":"http:\/\/youtube.com\/madonna", ...,
                "Size":"49955"}},
            ...
        ]
    }
}
    </pre>

    <h6>Schema</h6>
    <pre>
{
    resultListLocator: "ResultSet.Result",
    resultFields: ["Title"]
}
    </pre>

    <h6>Normalized data</h6>
    <input type="button" id="demo_json" value="Retrieve data">
    <div id="demo_output_json" class="output"></div>

    <h4>XML</h4>
    <h6>Data</h6>
    <pre>
&lt;query xmlns:yahoo="http://www.yahooapis.com/v1/base.rng"
    yahoo:count="10" ...&gt;
    &lt;diagnostics&gt;
        ...
    &lt;/diagnostics&gt;
    &lt;results&gt;
        &lt;result xmlns="http://www.inktomi.com/"&gt;
            ...
            &lt;dispurl&gt
                &lt;![CDATA[www.&lt;b&gt;madonna.com&lt;/b&gt;]]&gt;
            &lt;/dispurl&gt;
            &lt;size&gt;144947&lt;/size&gt;
            &lt;title&gt;
                &lt;![CDATA[&lt;b&gt;madonna&lt;/b&gt;.com home]]&gt;
            &lt;/title&gt;
            &lt;url&gt;http://www.madonna.com/&lt;/url&gt;
        &lt;/result&gt;
        &lt;result xmlns="http://www.inktomi.com/"&gt;
            ...
            &lt;dispurl&gt;
                &lt;![CDATA[&lt;b&gt;en.wikipedia.org&lt;/b&gt;/wiki/&lt;wbr&gt;
                &lt;b&gt;Madonna&lt;/b&gt;_(entertainer)]]&gt;
            &lt;/dispurl&gt;
            &lt;size&gt;450316&lt;/size&gt;
            &lt;title&gt;
                &lt;![CDATA[&lt;b&gt;Madonna&lt;/b&gt; (Entertainer) - Wikipedia]]&gt;
            &lt;/title&gt;
            &lt;url&gt;http://en.wikipedia.org/wiki/Madonna_(entertainer)&lt;/url&gt;
        &lt;/result&gt;
        &lt;result xmlns="http://www.inktomi.com/"&gt;
            ...
            &lt;dispurl&gt;
                &lt;![CDATA[www.&lt;b&gt;myspace.com&lt;/b&gt;/&lt;b&gt;madonna&lt;/b&gt;]]&gt;
            &lt;/dispurl&gt;
            &lt;size&gt;110851&lt;/size&gt;
            &lt;title&gt;
                &lt;![CDATA[&lt;b&gt;Madonna&lt;/b&gt; - MySpace]]&gt;
            &lt;/title&gt;
            &lt;url&gt;http://www.myspace.com/madonna&lt;/url&gt;
        &lt;/result&gt;
        ...
    &lt;/results&gt;
&lt;/query&gt;
</pre>

    <h6>Schema</h6>
    <pre>
{
    resultListLocator: "result",
    resultFields: [{key:"title", locator:"*[local-name() ='title']"}]
}
    </pre>

    <h6>Normalized data</h6>
    <input type="button" id="demo_xml" value="Retrieve data">
    <div id="demo_output_xml" class="output"></div>
</form>

<script type="text/javascript">
YUI().use("dump", "node", "datasource-io", "datasource-jsonschema", "datasource-xmlschema", function (Y) {
    var myDataSourceJSON = new Y.DataSource.IO({source:"../assets/datasource/ysearch.json"}),
        myCallbackJSON = {
            success: function(e){
                Y.one("#demo_output_json").setContent(Y.dump(e.response));
            },
            failure: function(e){
                Y.one("#demo_output_json").setContent("Could not retrieve data: " + e.error.message);
            }
        };

    myDataSourceJSON.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: "ResultSet.Result",
            resultFields: ["Title"]
        }
    });

    Y.on("click", function(e){
        myDataSourceJSON.sendRequest({
            request:"?output=json",
            callback:myCallbackJSON
        });
    }, "#demo_json");

    var myDataSourceXML = new Y.DataSource.IO({source:"../assets/datasource/ysearch.xml"}),
        myCallbackXML = {
            success: function(e){
                Y.one("#demo_output_xml").setContent(Y.dump(e.response).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"));
            },
            failure: function(e){
                Y.one("#demo_output_xml").setContent("Could not retrieve data: " + e.error.message);
            }
        };

    myDataSourceXML.plug(Y.Plugin.DataSourceXMLSchema, {
        schema: {
            resultListLocator: "result",
            resultFields: [{key:"title", locator:"*[local-name() ='title']"}]
        }
    });

    Y.on("click", function(e){
        myDataSourceXML.sendRequest({
            request:"?output=xml",
            callback:myCallbackXML
        });
    }, "#demo_xml");
});
</script>

</div>

<p>If your server returns JSON data, use a DataSourceJSONSchema plugin to parse the data against a schema that you provide:</p>

<pre class="code prettyprint">YUI().use(&quot;datasource-io&quot;, &quot;datasource-jsonschema&quot;, function(Y) {
    var myDataSource = new Y.DataSource.IO({source:&quot;ysearch_json_madonna.php&quot;}),
        myCallback = {
            success: function(e){
                alert(e.response);
            },
            failure: function(e){
                alert(&quot;Could not retrieve data: &quot; + e.error.message);
            }
        };

    myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: &quot;ResultSet.Result&quot;,
            resultFields: [&quot;Title&quot;]
        }
    });
    
    &#x2F;&#x2F; This request string will get appended to the URI
    myDataSource.sendRequest({
        request:&quot;?output=json&quot;,
        callback:myCallback
    });
});</pre>


<p>On the other hand, a DataSourceXMLSchema plugin can be used to parse XML data coming from your server:</p>

<pre class="code prettyprint">YUI().use(&quot;datasource-io&quot;, &quot;datasource-xmlschema&quot;, function(Y) {
    var myDataSource = new Y.DataSource.IO({source:&quot;ysearch_xml_madonna.php&quot;}),
        myCallback = {
            success: function(e){
                alert(e.response);
            },
            failure: function(e){
                alert(&quot;Could not retrieve data: &quot; + e.error.message);
            }
        };

    myDataSource.plug(Y.Plugin.DataSourceXMLSchema, {
        schema: {
            resultListLocator: &quot;result&quot;,
            resultFields: [{key:&quot;title&quot;, locator:&quot;*[local-name() =&#x27;title&#x27;]&quot;}]
        }
    });

    myDataSource.sendRequest({
        request:&quot;?output=xml&quot;,
        callback:myCallback
    });
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.">
                                        <a href="datasource-local.html">DataSource.Local</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy.">
                                        <a href="datasource-get.html">DataSource.Get</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The IO DataSource manages retrieval of data from remote sources, via the IO Utility.">
                                        <a href="datasource-io.html">DataSource.IO</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms">
                                        <a href="datasource-function.html">DataSource.Function</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
                                        <a href="datasource-caching.html">DataSource with Caching</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
                                        <a href="datasource-offlinecache.html">DataSource with Offline Cache</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use the Pollable extension to enable polling in your DataSource.">
                                        <a href="datasource-polling.html">DataSource with Polling</a>
                                    </li>
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
                                        <a href="../autocomplete/ac-datasource.html">Remote Data via DataSource</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
